<template>
  <div class="nav_outer">
    <Header>推荐有奖</Header>
    <div class="content">
        <div class="banner">
            <img src="../assets/img/rewardbanner@2x.png" alt="">
            <span @click="showRule">规则</span>
        </div>
        <div class="retabs">
            <div class="tab flex_bet" @click="showShare">
                <div class="left">
                    <img src="../assets/img/yaoqinghaoyou@2x.png" alt="">
                    <span>邀请好友</span>
                </div>
                <span class="mui-icon mui-icon-arrowright"></span>
            </div>
            <div class="tab flex_bet" @click="navito('inviterecords')">
                <div class="left">
                    <img src="../assets/img/yaoqingjilu@2x.png" alt="">
                    <span>邀请记录</span>
                </div>
                <span class="mui-icon mui-icon-arrowright"></span>
            </div>
        </div>
        <div class="codebox" v-show="codebox" @click="stopPro">
            <div class="ava_wrap">
              <img :src="user.actor | imgpre" alt="" v-if="user.actor">
            </div>
            <p class="name">{{ user.name }}</p>
            <div class="code_wrap">
                <!-- <img src="../assets/img/code@2x.png" alt=""> -->
                <img :src="qrcode" alt />
            </div>
            <p>微信扫一扫</p>
            <!-- <div class="close" @click="codebox=false">X</div> -->
        </div>
        <div class="rulebox" v-show="rule">
            <div class="part">
                <h5>活动时间</h5>
                <p>即日起-2020年12月30日</p>
            </div>
            <div class="part">
                <h5>活动内容</h5>
                <p>分享活动邀请好友跟你一起工作即可领取高额奖励</p>
            </div>
            <div class="part">
                <h5>具体规则</h5>
                <p>1.活动期间，用户通过分享活动页面邀请好友，好友注册成功并入职后，达到该在职企业规定工作时长即可领取高额奖励；</p>
                <p>2.用户通过应用内的微信、QQ、二维码或链接分享活动页面给好友，即成功参与活动；</p>
                <p>3.同一身份证、手机号、设备均视为同一用户，不允许一人多号参与，恶意套取奖金将取消资格并扣回奖金</p>
                <p>4.具体奖励金额可详见各企业招工详情</p>
                <p>本次活动的解释权在法律范围内归优职君集团所有</p>
            </div>
        </div>
        <!-- <div class="sharebox" v-show="share">
            <div class="share_li" @click="showcodebox">
                <img src="../assets/img/weixin@2x.png" alt="">
                <p>微信</p>
            </div>
            <div class="share_li">
                <img src="../assets/img/erweima@2x.png" alt="">
                <p>二维码</p>
            </div>
            <div class="share_li">
                <img src="../assets/img/QQ@2x.png" alt="">
                <p>QQ</p>
            </div>
            <div class="share_li">
                <img src="../assets/img/kongjian-2@2x.png" alt="">
                <p>QQ空间</p>
            </div>
        </div> -->
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import Header from '@/components/commonComponents/Header'
export default {
  data() {
    return {
      rule: false,
      share: false,
      codebox: false,
      qrcode: '',
      uid: this.$store.state.user.id
    }
  },
  computed: {
    ...mapState({
      user: function(){return this.$store.state.user}
    })
  },
  created(){
    this.createCode();
  },
  mounted(){
    let that = this;
    $(document).on('click',function(){
      that.codebox = false;
    })
  },
  methods: {
    navito(url){
      this.$router.push({path:url}); 
    },
    showRule(){
      this.rule = !this.rule;
    },
    showShare(event){
      let that = this;
      if(this.app.isInAPP){
        this.app.onShare && this.app.onShare({
          type: 2,
          urllink: location.href.replace('recoreward','')+'?shareId='+this.uid,
          title: '优职君',
          desc: '优职君真实全面的蓝领就业服务平台',
          imgurl: 'http://106.14.145.196:8686/yzj/image/download/b9ecb0b0adb57f113f13a173f9971f0c.png',
          path: `/pages/index/index?shareId=${this.uid}`,
          miniType: 0//0正式 1开发  2体验
        },function(){
          that.codebox = true;
        });
      }else if(this.app.isInmini){
        this.mui.alert('点击右上角邀请好友', '温馨提示', function() {
        });
      }
      event.stopPropagation();
    },
    stopPro(event){
      event.stopPropagation();
    },
    createCode(){
      if(!this.uid){return}
      this.Http.get(`/yzj/zxing`, {
        content: location.href.replace('recoreward','')+'?shareId='+this.uid
      }).then(res => {
        this.qrcode = 'data:image/png;base64,'+res;
      });
    }
  },
  components: {
      Header
  }
}
</script>

<style lang='scss' scoped>
  @function px2em($px) {
    @if (unitless($px)) {
      @return px2em($px + 0px);
    } @else if (unit($px) == em) {
      @return $px;
    }
    @return ($px / 75px) * 1rem;
  }
  body{
      background: #F5F5F5!important;
  }
  .banner{
    position: relative;
    >span{
      color: #fff;
      position: absolute;
      right: px2em(40);
      top: px2em(10);
    }
      >img{
          width: 100%;
      }
  }
  .retabs{
    .tab{
        background: #fff;
        margin-bottom: 2px;
        padding: px2em(26) px2em(30);
        img{
            height: px2em(40);
            width: auto;
            margin-right: px2em(32);
        }
        .left{
            display: flex;
            align-items: center;
        }
    }
  }
  .rulebox{
    width: px2em(640);
    height: px2em(670);
    box-sizing: border-box;
    padding: px2em(50);
    left: px2em(55);
    top: px2em(210);
    border-radius: 15px;
    position: absolute;
    background: #fff;
    z-index: 101;
    overflow-y: scroll;
    
  }
  .part{
    margin-bottom: px2em(50);
    font-size: 10px;
    &:last-child{
      margin-bottom:0;
    }
    h5{
      font-weight: bold;
      font-size: 0.8em;
      color: #333;
    }
    p{
      line-height: 1.8;
      font-size: 0.8em;
    }
  }
  .codebox{
      width: px2em(640);
      height: px2em(600);
      text-align: center;
      position: absolute;
      z-index: 100;
      top: 50%;
      margin-top: - px2em(300);
      left: 50%;
      margin-left: - px2em(320);
      background: #fff;
      border-radius: 10px;
      .ava_wrap{
          width: px2em(100);
          height: px2em(100);
          border-radius: 50%;
          background: #4D7FF3;
          margin: px2em(48) auto 0;
          overflow: hidden;
          
      }
      .name{
          margin: px2em(24) 0;
      }
      img{
            width: 100%;
        }
      .code_wrap{
          width: px2em(260);
          height: px2em(260);
          margin: 0 auto;
      }
      .close{
        position: absolute;
        width: 50px;
        height:50px;
        font-size: 20px;
        right: 0;
        top: 0;
        text-align: center;
        line-height: 50px;
      }
  }
  .sharebox{
      display: flex;
      background: #fff;
      border-radius: 15px;
      padding: px2em(52) 0;
      width: px2em(640);
      position: absolute;
      bottom: 0;
      left: px2em(55);
      .share_li{
          >img{
              width: px2em(60);
              height: px2em(60);
          }
          flex: 1;
          text-align: center;
      }
  }
</style>